<script setup>
import {onMounted, ref} from "vue";
import {ListMsg, Respond, SelectAnnounced, StopAnnounce} from "@/utils/api/enterprise.js";
import {useUserLoginStore} from "@/stores/AccountLogin.js";
import {ElMessage, ElNotification} from "element-plus";

const eno = useUserLoginStore().getAccount;
const data = ref([{
  id: '',
  jobInfo: "",
  announceTime: "",
}]);
const visible = ref(false);
const ltMsg = ref([{
  id: '',
  sno: '',
  content: '',
  contentTime: '',
  respond: '',
  respondTime: '',
}]);
const msgRs = ref({
  id: '',
  respond: '',
});
const disable = ref(true);

const select = () => {
  data.value = [];
  SelectAnnounced(eno)
      .then(result => {
        if (result.code === 1) {
          data.value = result.data;
        } else {
          ElNotification({
            message: "服务器错误",
            type: 'error',
          })
        }
      }).catch(error => console.error(error.toString()));
}

const listMsg = (jobId) => {
  visible.value = true;
  ListMsg(eno, jobId).then(result => {
    if (result.code === 1) {
      ltMsg.value = result.data;
    } else {
      ElMessage({
        message: '服务器错误',
        type: 'error',
      })
    }
  }).catch(error => console.error(error.toString()));
}

const openRespond = (id) => {
  disable.value = false;
  msgRs.value.id = id;
}

const respondMsg = () => {
  const m = msgRs.value;
  if (m.respond === '' || m.respond === null) {
    ElMessage({
      message: '请输入回复语',
      type: 'warning',
    });
    return;
  }
  Respond(m.id, m.respond).then(result => {
    if (result.code === 1) {
      ElNotification({
        message: '回复成功',
        type: 'success',
      })
    } else {
      ElMessage({
        message: '回复失败，请重试',
        type: 'warning',
      })
    }
  }).catch(error => console.error(error.toString()));
  disable.value = false;
  visible.value=false;
  m.respond = '';
}

const stop = (jobId) => {
  StopAnnounce(jobId)
      .then(result => {
        if (result.code === 1) {
          ElNotification({
            message: '已停止招聘',
            type: 'success',
          })
          setTimeout(select, 100)
        } else {
          ElMessage({
            message: "服务器错误",
            type: 'error',
          })
        }
      }).catch(error => console.error(error.toString()));
}

onMounted(() => {
  select();
})


</script>

<template>
  <el-table :data="data" border stripe max-height="550px">
    <el-table-column prop="id" label="ID" width="100"/>
    <el-table-column prop="jobInfo" label="招聘信息" width="700"/>
    <el-table-column prop="announceTime" label="发布日期" width="200"/>
    <el-table-column label="操作" width="200" fixed="right">
      <template #default="scope">
        <el-button link type="danger" @click="stop(scope.row.id)">结束招聘</el-button>
        <el-button link type="primary" @click="listMsg(scope.row.id)">查看留言</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="visible" title="查看留言" width="800" :align-center="true"
             @close="msgRs.respond = '';disable = true;">
    <div class="msg-info">
      <div v-for="(item, index) in ltMsg" :key="index">
        <div v-if="(index === 0 || item.sno !== ltMsg[index - 1].sno) &&
       (item.sno !== null && item.sno !== '')">
          <br>求职者{{ index + 1 }}
          <hr>
        </div>
        <div class="msg-content" v-if="item.content !== null && item.content !== ''">
          留言-> {{ item.content }}<span class="time">__{{ item.contentTime }}</span>
          <span class="msg-respond" v-if="(item.content !== null && item.content !== '') &&
          (item.respond === null || item.respond === '')">
            <el-button type="primary" link @click="openRespond(item.id)">回复</el-button>
          </span>
        </div>
        <div class="msg-respond" v-if="item.respond !== null && item.respond !== ''">
          {{ item.respond }} <-回复<span class="time">__{{ item.contentTime }}</span>
        </div>
      </div>
    </div>
    <br>
    <div class="msg-respond" v-if="ltMsg.length > 0">
      <el-input type="textarea" v-model="msgRs.respond" :rows="4" resize="none"
                :disabled="disable" maxlength="240" :show-word-limit="true"/>
      <br>
      <el-button type="primary" @click="respondMsg">回 复</el-button>
    </div>
  </el-dialog>

</template>

<style scoped>
.msg-info {
  max-height: 500px;
  overflow: auto;
}

.time {
  color: gray;
}

.msg-content {
  text-align: left;
  color: green;
}

.msg-respond {
  text-align: right;
  color: blue;
}
</style>
